<template>
    <addEditBaseRoleView ref="addEditBaseRoleView" />
    <el-container>
        <el-main>
            <div class="app-table">
                <div class="app-body">
                    <div class="mainBox">
                        <div class="mainBox_left">
                            <div class="department_top">
                                <span>部门选择</span>
                                <img src="../../assets/departRole_icon.png" alt="">
                            </div>
                            <div class="department_box">
                                <ul class="ul_department">
                                    <li :class="{ 'department_li': item.id == departmentId }"
                                        v-for="item in departmentList" :key="item.id" @click="departHandle(item.id)">{{
                                            item.name }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="mainBox_center">
                            <div class="role_top">
                                <span>设置权限</span>
                                <img src="../../assets/departRoleAll_icon.png" alt="">
                            </div>
                            <div class="role_box">
                                <div class="flex gap-2">
                                    <el-tag v-for="(item, index) in 10" :key="index" closable type="primary">
                                        {{ '权限1' }}
                                    </el-tag>
                                </div>
                                <!-- <div class="add_box">
                                    <el-icon>
                                        <Plus />
                                    </el-icon>
                                </div> -->

                                <el-popover placement="bottom" width="23%" height="50%" trigger="click">
                                    <template #reference>
                                        <div class="add_box">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </div>
                                    </template>
                                    <div class="form_box">
                                        <el-form :model="addBasePermissionForm" ref="addBasePermissionRef"
                                            :rules="addBasePermissionrules">
                                            <el-checkbox v-for="item in roleList" :value="item.id"
                                                v-model="item.checked" :label="item.name"
                                                style="width:170px; color: #000520;"></el-checkbox>
                                        </el-form>
                                    </div>
                                </el-popover>

                            </div>
                        </div>
                        <div class="mainBox_right">
                            <!-- <div class="menu_top">
                                <div class="tab_li1" @click="active = 1">
                                    <p>设置权限</p>
                                    <div :class="{ 'xian1': true, 'xian': active === 1 }" id="xian"></div>
                                </div>
                                <div class="tab_li1" @click="active = 2">
                                    <p>前台菜单</p>
                                    <div :class="{ 'xian1': true, 'xian': active === 2 }" id="xian"></div>
                                </div>
                                <div class="tab_li1" @click="active = 3">
                                    <p>后台菜单</p>
                                    <div :class="{ 'xian1': true, 'xian': active === 3 }" id="xian"></div>
                                </div>
                            </div> -->
                            <div class="role_top">
                                <span>前台菜单</span>
                                <img src="../../assets/departRoleAll_icon.png" alt="">
                            </div>
                            <div class="menu_box">
                                <el-form :model="addBasePermissionForm" ref="addBasePermissionRef"
                                    style="padding-bottom: 100px;" :rules="addBasePermissionrules">
                                    <el-checkbox v-for="item in frontMenu" :value="item.id" v-model="item.checked"
                                        :label="item.name" style="width:140px;color: #000520;"></el-checkbox>
                                </el-form>
                            </div>

                        </div>
                        <div class="mainBox_back">
                            <div class="role_top">
                                <span>前台菜单</span>
                                <img src="../../assets/departRoleAll_icon.png" alt="">
                            </div>
                            <div class="back_box">
                                <el-tree :render-content="renderContent" show-checkbox :data="backMenu"
                                    :props="defaultProps" :expand-on-click-node="false" node-key="id"
                                    :default-expanded-keys="expanded" ref="tree">
                                </el-tree>
                            </div>
                        </div>

                    </div>
                </div>
                <bottomView></bottomView>
            </div>
        </el-main>
    </el-container>
</template>
<script>
import addEditBaseRoleView from "@/components/baseInfo/addEditBaseRole.vue";
import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload, Plus } from "@element-plus/icons-vue";
import bottomView from "@/components/bottom.vue";

export default {
    name: "BaseRoleListView",
    data() {
        return {
            active: 1,
            departmentId: "",
            backMenu: [],//后台菜单
            departmentList: [],//部门菜单
            frontMenu: [],//前台菜单
            permissionList: [],//权限菜单
            roleList: [],//角色菜单
            // data: [
            //     {
            //         label: "全部",
            //         id: "",
            //         children: [],
            //     },
            // ],
            // defaultProps: {
            //     children: "children",
            //     label: "label",
            // },
        };
    },
    components: {
        addEditBaseRoleView, bottomView,
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        ElMessage, Upload, Plus,
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getAllData()
        this.getDepartmentList();
        this.getBasePermission()
    },
    watch: {
    },
    methods: {
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                // this.getBaseRoleList();
            }
        },
        getDepartmentList() {
            httpService(
                "/javaApi/baseDepartment/list/1/100",
                {
                    // type: 1
                },
                "get"
            ).then((data) => {
                console.log(data);
                this.departmentList = data.list
            });
        },
        departHandle(id) {
            this.departmentId = id
        },
        getBasePermission() {
            httpService("/javaApi/baseRole/queryAllUserRole/" + 8920, {}, "get").then(
                (data) => {
                    this.userRoleList = data;
                    // this.uId = id;
                }
            );
        },
        getAllData() {
            httpService(
                "/javaApi/baseDepartment/getTree",
                {},
                "get"
            ).then((data) => {
                console.log(data);
                // this.departmentList = data.list
                this.backMenu = data.backMenu
                this.departmentList = data.department
                this.frontMenu = data.frontMenu
                this.permissionList = data.permission
                this.roleList = data.role

            });
        },

    },
};
</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
}

.el-main {
    padding: 0px;
}

.teacher-content {
    width: 100%;
}

.app-table {
    background: #eff3f5;
    padding:5px 10px 10px;
}

.app-search {
    margin-top: 20px;
}

.app-separator {
    padding-top: 10px;
    padding-bottom: 20px;
    padding-left: 10px;
}

.app-body {
    background: white;
    /* padding: 20px 20px 10px 20px; */
    margin-bottom: 10px;
    min-height: calc(100vh - 135px);
    text-align: left;
    width: 100%;
    height: 100%;
}

.mainBox {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
}

.mainBox_left {
    width: 200px;
    height: calc(100vh - 135px);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mainBox_center {
    height: calc(100vh - 135px);
    width: 30%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mainBox_right {
    height: calc(100vh - 135px);
    width: 30%;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.mainBox_back {
    height: calc(100vh - 135px);
    width: 30%;
}

.department_top {
    height: 60px !important;
    height: 100%;
    line-height: 60px;
    color: #B4B4B4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

.department_top span {
    margin: 0 15px 0 22px;
    font-size: 16px;
}

.department_top img {
    height: 14px;
}

.role_top {
    line-height: 60px;
    color: #B4B4B4;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.role_top span {
    margin: 0 15px 0 30px;
    font-size: 16px;
}

.role_top img {
    height: 14px;
}

.menu_top {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tab_li1 {
    height: 60px;
    width: 98px;
    text-align: center;
    color: #666666;
    margin-left: 17px;
    cursor: pointer;
}

.tab_li1 p {
    margin-top: 20px;
    font-size: 16px;
}

.tab_li1 .xian1 {
    width: 100%;
    height: 3px;
    margin-top: 17px;
    background-color: transparent;
    border-radius: 2px;
    transition: background-color 0.3s ease-in-out;
}

.tab_li1 .xian {
    background-color: #006DEA !important;
}



.department_box {
    width: 200px;
    /* height: 100%; */
    overflow-y: scroll;
    height: 78vh;
}

.role_box {
    /* width: 45%; */
    height: 100%;
    overflow-y: scroll;
}

.menu_box {
    width: 100%;
    overflow-y: scroll;
    padding-bottom: 100px;
}

.ul_department {
    list-style: none;
    padding-bottom: 100px;
    margin-top: 10px;

}

.ul_department li {
    color: #000520;
    line-height: 50px;
    margin: 0 16px;
    background-color: #FFF;
    border-radius: 5px;
    padding-left: 10px;
    font-size: 14px;
    transition: background-color 0.3s ease-in-out;
    cursor: pointer;
}

.department_li {
    background-color: #DDEFFF !important;
}

.el-form {
    margin: 15px 30px;
    padding-bottom: 100px;
}

.el-tree {
    padding-bottom: 100px;
    margin: 15px 30px;
}

.back_box {
    height: 100%;
    overflow-y: scroll !important;
}

.gap-2 {
    margin: 20px 15px 0 30px;
}

.gap-2 .el-tag {
    margin: 0 5px 7px 0;
    padding-left: 8px;
    font-size: 13px;
}

.add_box {
    margin: 0 30px;
    background-color: #EEEEEE;
    border-radius: 3px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.add_box .el-icon {
    /* font-size: 12px; */
}


.form_box {
    max-height:500px;
    overflow: auto;
}
</style>
